<template>
  <div class="xq-form-wrapper pl24 pr24 pb48">
    <div class="xq-form-search">
      <a-month-picker :allow-clear="false" valueFormat="YYYYMM" placeholder="税款所属月" v-model="month" @change="onSearch" />
    </div>
    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :customize="FormJson['config']['table']['customize']"
        :scroll="{ x: columns.length * 150 }"
        :pagination="false"
        :dataSource="tableData"
        :columns="columns"
        :row-selection="
          FormJson['config']['table']['extend']['batch']
            ? {
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }
            : null
        "
        class="xq-form-content-table"
        @change="onTableChange"
      >
        <!-- 主要内容，表格，自定义 header -->
        <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
          <span :key="index">{{ col.customTitle }}</span>
        </template>
        <!-- 主要内容，表格，自定义 td -->
        <!-- eslint-disable-next-line prettier/prettier -->
        <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
          <div v-if="col.dataIndex === 'status'" :key="index">{{ peopleStatusJson[text] }}</div>
          <div v-else-if="col.dataIndex === 'employmentType'" :key="index">{{ employmentTypeJson[text] }}</div>
          <div v-else-if="col.dataIndex === 'submissionState'" :key="index">{{ submissionStateJson[text] }}</div>
          <div v-else-if="col.dataIndex === 'authenticationState'" :key="index">{{ authenticationStateJson[text] }}</div>
          <div v-else-if="col.dataIndex === 'employeeVO.licenseType'" :key="index">{{ licenseTypeJson[text] }}</div>
          <div v-else-if="col.dataIndex === 'employeeVO.gender'" :key="index">
            <span v-if="text == 1">男</span>
            <span v-if="text == 2">女</span>
          </div>
          <div v-else-if="col.dataIndex === 'employeeVO.birthday'" :key="index">{{ text }}</div>
          <div v-else-if="col.dataIndex === 'employeeVO.nationality'" :key="index">{{ text }}</div>
          <div v-else-if="col.dataIndex === 'personalInvestmentRatio'" :key="index">{{ text ? `${text}%` : "" }}</div>
          <div v-else-if="col.dataIndex === 'employeeVO.isDisable'" :key="index">{{ text ? "是" : text === false ? "否" : "" }}</div>
          <div v-else-if="col.dataIndex === 'employeeVO.isMartyr'" :key="index">{{ text ? "是" : text === false ? "否" : "" }}</div>
          <div v-else-if="col.dataIndex === 'employeeVO.isOld'" :key="index">{{ text ? "是" : text === false ? "否" : "" }}</div>
          <div v-else-if="col.dataIndex === 'employeeVO.disableCard'" :key="index">{{ text }}</div>
          <div v-else-if="col.dataIndex === 'employeeVO.martyrCard'" :key="index">{{ text }}</div>
          <div v-else-if="col.dataIndex === 'isDeductDeductible'" :key="index">{{ text ? "是" : text === false ? "否" : "" }}</div>
          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
        </template>
      </XqTable>
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="pageNo"
          :page-size="pageSize"
          :total="total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['10', '20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
    </a-spin>
    <div class="table-body-footer" :style="{ width: `calc(100vw - 188px)`, left: `188px` }">
      <a-button class="mr12" @click="goBack">取消</a-button>
      <a-button type="primary" @click="onSetUp">下一步</a-button>
    </div>
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { peopleStatusArr, employmentTypeArr, submissionStateArr, authenticationStateArr, licenseTypeArr } from "../../../staticData";
import { getPageSubmit } from "./api";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  mixins: [curdMixin],
  data() {
    return {
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      month: this.moment().format("YYYYMM"),
      peopleStatusJson: {},
      employmentTypeJson: {},
      submissionStateJson: {},
      authenticationStateJson: {},
      licenseTypeJson: {}
    };
  },
  created() {
    this.getVal();
    this.onGetPageSubmit();
  },
  methods: {
    getVal() {
      peopleStatusArr.map((e) => {
        this.peopleStatusJson[e.value] = e.label;
      });
      employmentTypeArr.map((e) => {
        this.employmentTypeJson[e.value] = e.label;
      });
      submissionStateArr.map((e) => {
        this.submissionStateJson[e.value] = e.label;
      });
      authenticationStateArr.map((e) => {
        this.authenticationStateJson[e.value] = e.label;
      });
      licenseTypeArr.map((e) => {
        this.licenseTypeJson[e.value] = e.label;
      });
    },
    async onGetPageSubmit() {
      try {
        this.visible = false;
        this.spinning = true;
        const authorityId = sessionStorage.getItem("taxCalculate/authorityId");
        const tabType = sessionStorage.getItem("taxCalculate/tabType");
        const reportIdArr = sessionStorage.getItem("taxCalculate/reportIdArr");
        const params = {
          authorityId,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          // period: this.month,
          tabType,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        };
        console.log("reportIdArr", reportIdArr);
        const arr = reportIdArr ? JSON.parse(reportIdArr) : [];
        if (arr.length > 0) {
          params.ids = arr;
        }
        const { data } = await getPageSubmit(params);
        this.tableData = data?.entities || [];
        this.total = data?.entityCount || 0;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        this.tableData = [];
        this.total = 0;
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetPageSubmit();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetPageSubmit();
    },
    onSearch() {
      // this.pageNo = 1;
      // this.onGetPageSubmit();
    },
    goBack() {
      this.$confirm({
        title: "员工信息尚未上报，是否确认离开？",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          this.$router.go(-1);
        }
      });
    },
    onSetUp() {
      sessionStorage.setItem("taxCalculate/period", this.month);
      this.$emit("upData", 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.table-body-footer {
  z-index: 999;
  height: 56px;
  line-height: 56px;
  padding: 0 24px;
  background: #ffffff;
  -webkit-box-shadow: 0px 2px 7px 0px rgb(0 0 0 / 15%);
  box-shadow: 0px 2px 7px 0px rgb(0 0 0 / 15%);
  text-align: center;
  position: fixed;
  bottom: 0;
}
</style>
